<%= render Polaris::LabelledComponent.new(**wrapper_arguments) do %>
  <div class="Polaris-Connected">
    <% if connected_left.present? %>
      <div class="Polaris-Connected__Item">
        <%= connected_left %>
      </div>
    <% end %>

    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
      <%= render Polaris::BaseComponent.new(**system_arguments) do %>
        <% if prefix.present? || @prefix.present? %>
          <div class="Polaris-TextField__Prefix">
            <%= prefix || @prefix %>
          </div>
        <% end %>

        <% if @form.present? && @attribute.present? %>
          <%= @form.public_send(input, @attribute, input_options) %>
        <% else %>
          <%= public_send(input_tag, @name, @value, input_options) %>
        <% end %>

        <% if suffix.present? || @suffix.present? %>
          <div class="Polaris-TextField__Suffix">
            <%= suffix || @suffix %>
          </div>
        <% end %>

        <% if @show_character_count %>
          <div
            class="
              Polaris-TextField__CharacterCount
              <%= "Polaris-TextField__AlignFieldBottom" if @multiline %>
            "
            data-polaris-text-field-target="characterCount"
            aria-label="<%= character_count.label %>"
            aria-atomic="true"
          >
            <%= character_count.text %>
          </div>
        <% end %>

        <% if @clear_button %>
          <button
            type="button"
            class="Polaris-TextField__ClearButton
              <% if @value.blank? %>
                Polaris-TextField__Hidden
              <% end %>"
            tabindex="0"
            data-polaris-text-field-target="clearButton"
            data-action="polaris-text-field#clear"
          >
            <%= polaris_visually_hidden { "Clear" } %>
            <%= polaris_icon(name: "XCircleIcon", color: :base) %>
          </button>
        <% end %>

        <% if render_number_buttons? %>
          <div class="Polaris-TextField__Spinner" aria-hidden="true">
            <div
              role="button"
              class="Polaris-TextField__Segment"
              tabindex="-1"
              data-action="click->polaris-text-field#increase"
            >
              <div class="Polaris-TextField__SpinnerIcon">
                <%= polaris_icon do %>
                  <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="M15 12l-5-5-5 5h10z"></path>
                  </svg>
                <% end %>
              </div>
            </div>

            <div
              role="button"
              class="Polaris-TextField__Segment"
              tabindex="-1"
              data-action="click->polaris-text-field#decrease"
            >
              <div class="Polaris-TextField__SpinnerIcon">
                <%= polaris_icon do %>
                  <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="M5 8l5 5 5-5H5z"></path>
                  </svg>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>

        <div class="Polaris-TextField__Backdrop"></div>
      <% end %>
    </div>

    <% if connected_right.present? %>
      <div class="Polaris-Connected__Item">
        <%= connected_right %>
      </div>
    <% end %>
  </div>
<% end %>
